<template>
	<view class="container">
		<u-section :title="detail.status == 2 ? '待发货' : detail.status == 4 ? '待收货' : '已完成'" line-color="#009175"
			:right="false" :arrow="false"></u-section>
		<u-line color="#f7f7f7" margin="10rpx 0"></u-line>
		<u-section :title="detail.status == 2 ? '领取下单成功，平台正在打包' : detail.status == 4 ? '奖品正在运输，请耐心等待' : '订单已完成，欢迎再次参与'"
			color="#666" font-size="24" :bold="false" line-color="#F7F7F7" :right="false" :arrow="false"></u-section>

		<view class="u-flex u-col-center u-row-between u-p-30 u-type-white-bg u-radius-10 u-m-tb-20">
			<view class="u-m-r-30">
				<view v-if="detail.status == 2" class="u-font-22 u-content-color">
					{{detail.param.address.province + ' ' + detail.param.address.city + ' ' + detail.param.address.county}}
				</view>
				<view v-else class="u-font-24 u-content-color" @click="popupShow =  true">
					<u-icon name="car" :label="detail.param.express.name" size="30" label-size="24"
						label-color="#009175" label-pos="right" margin-left="10"></u-icon>
					<text>：{{detail.param.express.num}}</text>
				</view>
				<view class="u-m-tb-30 u-font-30 u-font-bold">
					{{detail.param.address.province + detail.param.address.city + detail.param.address.county + detail.param.address.address}}
				</view>
				<view class="u-font-22 u-content-color">{{detail.param.address.username}} {{detail.param.address.phone}}
				</view>
			</view>

			<u-icon name="arrow-right" size="28" color="#848484"></u-icon>
		</view>

		<view class="u-p-30 u-type-white-bg u-radius-10 u-m-tb-20">
			<view class="u-font-bold">套餐信息</view>
			<u-line color="#Ffffff" margin="10rpx 0"></u-line>

			<view class="u-flex" v-for="(item,index) in detail.goods_list" :key="item.id">
				<u-image width="195" height="185" :src="item.image"></u-image>
				<view class="u-m-l-25">
					<view class="u-font-30 u-font-bold">{{item.goods_name}}</view>
					<view class="u-font-24 u-m-t-20 listItem u-w-400 ">
						<view class="u-line-1" v-for="(p,k) in item.sku_value" :key="k">{{p}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="u-p-lr-30 u-type-white-bg u-radius-10 u-m-tb-20">
			<view class="u-flex u-col-center u-row-between u-m-tb-30">
				<view>订单备注</view>
				<view>{{detail.remark || '无'}}</view>
			</view>

		</view>
		<view class="u-p-lr-30 u-type-white-bg u-radius-10 u-m-tb-20">
			<view class="u-flex u-col-center u-row-between u-m-tb-30">
				<view>订单编号</view>
				<view><text style="color: #009175;" @click="copy(detail.order_num)">复制</text>{{detail.order_num}}</view>
			</view>
			<view class="u-flex u-col-center u-row-between u-m-tb-30">
				<view>下单时间</view>
				<view>{{detail.create_time | date('yy-mm-dd hh:MM:ss')}}</view>
			</view>
			<view class="u-flex u-col-center u-row-between u-m-tb-30" v-if="detail.send_time">
				<view>发货时间</view>
				<view>{{detail.send_time | date('yy-mm-dd hh:MM:ss')}}</view>
			</view>
			<view class="u-flex u-col-center u-row-between u-m-tb-30" v-if="detail.receive_time">
				<view>收货时间</view>
				<view>{{detail.receive_time | date('yy-mm-dd hh:MM:ss')}}</view>
			</view>
			<view class="u-flex u-col-center u-row-between u-m-tb-30" v-if="detail.finish_time">
				<view>完成时间</view>
				<view>{{detail.finish_time | date('yy-mm-dd hh:MM:ss')}}</view>
			</view>
		</view>

		<u-gap height="150" v-if="detail.status == 4"></u-gap>
		<view class="submit-btn safe-area-inset-bottom" v-if="detail.status == 4">
			<view class="u-p-30 u-flex u-row-right">
				<u-button shape="circle"
					:custom-style="{color: '#009175',fontSize: '30rpx',width: '230rpx',height: '80rpx',marginRight: '20rpx'}"
					@click="popupShow= true">查看物流</u-button>
				<u-button type="success" shape="circle"
					:custom-style="{background: '#009175',fontSize: '30rpx',width: '230rpx',height: '80rpx'}" @click="confirmOrder">确认收货</u-button>
			</view>
		</view>
		<!-- 物流信息 -->
		<u-popup mode="bottom" v-model="popupShow" border-radius="15">
			<view class="u-p-30">
				<view class="u-flex u-row-between u-col-center">
					<view class="u-font-32 u-font-bold">物流信息</view>
					<u-image width="30" height="30" src="/static/clear.png" @click="popupShow = false"></u-image>
				</view>
				<u-line color="#fff" margin="15rpx 0"></u-line>
				<view class="u-flex u-row-between u-col-center">
					<view class="u-content-color">
						<u-icon name="car" :label="detail.param.express.name" size="40" label-color="#009175"
							label-pos="right" margin-left="25"></u-icon>
						<text>：{{detail.param.express.num}}</text>
					</view>
					<text style="color: #009175;" @click="copy(detail.param.express.num)">复制</text>
				</view>
				<u-line color="#f2f2f2" margin="15rpx 0"></u-line>
				<scroll-view scroll-y style="max-height: 800rpx;">
					<u-time-line>
						<u-time-line-item v-for="(item,index) in expressDetail" :key="index">
							<template v-slot:node>
								<view v-if="index==0" class="u-node" style="background: #19be6b;">
									<!-- 此处为uView的icon组件 -->
									<u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
								</view>
								<view v-else class="u-nodeT">

								</view>
							</template>

							<template v-slot:content>
								<view>
									<view class="u-order-desc">{{item.AcceptStation}}</view>
									<view class="u-order-time">{{item.AcceptTime}}</view>
								</view>
							</template>
						</u-time-line-item>
					</u-time-line>
				</scroll-view>
			</view>
		</u-popup>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				popupShow: false,
				detail: {},
				expressDetail: {} // 快递详情
			}
		},

		onLoad({
			order_num
		}) {
			this.getDetail(order_num)
			this.getOrderExpress(order_num)
		},
		methods: {
			getDetail(order_num) {
				this.$u.api.shopOrderInfo({
					order_num
				}).then(res => this.detail = res.data)
			},
			//确定收货
			confirmOrder() {
				uni.showModal({
					title: '请确认收到物品',
					success: (result) => {
						if(result.confirm){
							this.$u.api.confirmOrder({
								order_num: this.detail.order_num
							}).then(res => {
								this.$u.toast(res.msg)
								this.getDetail(this.detail.order_num)
								uni.$emit('changeList')
							}).catch(err => {
								this.$u.toast(err.msg)
							})
						}
					}
				})
			},
			//复制
			copy(order_num) {
				uni.setClipboardData({
					data: order_num
				})
			},
			// 快递详情
			getOrderExpress(order_num) {
				this.$u.api.getOrderExpress({
					order_num
				}).then(res => {
					this.expressDetail = res.data.reverse()
				}).catch(err => {
					this.expressDetail = []
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 30rpx;
	}

	.submit-btn {
		background: #fff;
	}

	.listItem {
		color: #666666;
		line-height: 36rpx;
	}


	/deep/.u-time-axis.data-v-428f87fa {
		padding-left: 80rpx;
	}
	/deep/.u-time-axis.data-v-428f87fa::before{
		left: 40rpx;
	}
	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-nodeT {
		width: 22rpx;
		height: 22rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.u-order-desc {
		color: rgb(150, 150, 150);
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}
</style>